<!DOCTYPE html>
<html>
<head>
  <title>Style Nested</title>
  <script src="http://www.polymer-project.org/polymer/polymer.min.js"></script>
  
<element name="test-view" constructor="TestItem">
  <template>
    <style>
      @host {
        * {
          background-color: yellow;
          width: 50px;
          height: 50px;
          margin: 10px;
          padding: 10px;
          text-align:center;
          display: block;
        }
      }
    </style>
    <div id="el"><content></content></div>
  </template>
  <script>
    Polymer.register(this);
  </script>
</element>

<element name="test-peep" attributes="name rotation">
  <script>
    Polymer.register(this, {
      omega: 15,
      insertedCallback: function() {
        this.rotation = Array.prototype.indexOf.call(this.parentNode.children, this) * this.omega;
      }
    });
  </script>
</element>
  
<element name="test-container" attributes="kids">
  <template>
    <style>
      #container {
        display: block;
        position: relative;
        background-color: green;
        padding: 10px;
      }
    </style>
    <div id="container"><content></content>
      <template repeat="{{kids}}">
        <test-view style="-webkit-transform: rotate({{rotation}}deg);">{{name}}</test-view>
      </template>
    </div>
  </template>
  <script>
    Polymer.register(this, {
      insertedCallback: function() {
        this.kids = Array.prototype.slice.call(this.querySelectorAll('test-peep'), 0);
      }
    });
  </script>
</element>

  <style>
    body {
      font-family:Arial,san-serif;
    }
  </style>
</head>
  
<body>
  <test-container id="container">
    <test-peep name="Bob"></test-peep>
    <test-peep name="Carol"></test-peep>
    <test-peep name="Ted"></test-peep>
    <test-peep name="Alice"></test-peep>
  </test-container>
</body>
